<template>
	<div class="page" v-loading="loading">
		<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/shop' }">融酒商城</el-breadcrumb-item>
			<el-breadcrumb-item>修改商品</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form class="content" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="160px">
			<el-form-item label="商品编号">
				<span>{{ruleForm.goodsNo}}</span>
			</el-form-item>
			<el-form-item label="商品名称" prop="goodsName">
				<el-input size="small" v-model="ruleForm.goodsName"></el-input>
			</el-form-item>
			<el-form-item label="商品英文名称" prop="goodsTitle">
				<el-input size="small" v-model="ruleForm.goodsTitle"></el-input>
			</el-form-item>
			<el-form-item label="商品分类" prop="categoryId">
				<el-select v-model="ruleForm.categoryId" filterable placeholder="请选择">
					<el-option v-for="(item,index) in categoryData" :key="index" :label="item.categoryName" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品描述" prop="goodsDesc">
				<el-input style="width: 288px;" type="textarea" :maxlength="60" :autosize="{ minRows: 2, maxRows: 4}" v-model="ruleForm.goodsDesc">
				</el-input>
			</el-form-item>
			<el-form-item label="商品图片">
				<upload-image-more ref="imageMain" v-on:sendImagesMoreData="getImagesMaineData" v-on:delImg="getDelImgMain" :updateData="mainImages"></upload-image-more>
			</el-form-item>
			<el-form-item label="商品详细图片">
				<upload-image-more ref="imageMore" v-on:sendImagesMoreData="getImagesMoreData" v-on:delImg="getDelImg" :updateData="OtherImages"></upload-image-more>
			</el-form-item>
			<el-form-item label="供应商" prop="supplierId">
				<el-select v-model="ruleForm.supplierId" filterable placeholder="请选择">
					<el-option v-for="item in supplieres" :key="item.id" :label="item.supplierName" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="国家" prop="country">
				<el-input size="small" v-model="ruleForm.country"></el-input>
			</el-form-item>
			<el-form-item label="产区" prop="region">
				<el-input size="small" v-model="ruleForm.region"></el-input>
			</el-form-item>
			<el-form-item label="销量" prop="saleNum">
				<el-input size="small" v-model="ruleForm.saleNum"></el-input>
			</el-form-item>
			<el-form-item label="规格名称">
				<el-input size="small" v-model="ruleForm.goodsNorm.normName"></el-input>
			</el-form-item>
			<el-form-item label="年份" prop="year">
				<el-input size="small" v-model="ruleForm.year"></el-input>
			</el-form-item>
			<el-form-item label="销售价格（分）" prop="price">
				<el-input size="small" v-model="ruleForm.price"></el-input>
			</el-form-item>
			<el-form-item label="会员价格（分）" prop="vipPrice">
				<el-input size="small" v-model="ruleForm.vipPrice"></el-input>
			</el-form-item>
			<el-form-item label="酒家价格（分）" prop="winePrice">
				<el-input size="small" v-model="ruleForm.winePrice"></el-input>
			</el-form-item>
			<el-form-item label="销售员价格（分）" prop="salesPrice">
				<el-input size="small" v-model="ruleForm.salesPrice"></el-input>
			</el-form-item>
			<el-form-item label="分销商价格（分）" prop="distributorsPrice">
				<el-input size="small" v-model="ruleForm.distributorsPrice"></el-input>
			</el-form-item>
			<el-form-item label="总代价格（分）" prop="rosePrice">
				<el-input size="small" v-model="ruleForm.rosePrice"></el-input>
			</el-form-item>
			<el-form-item label="投资人价格（分）" prop="investorPrice">
				<el-input size="small" type="number" v-model="ruleForm.investorPrice"></el-input>
			</el-form-item>
			<el-form-item label="市场价格（分）" prop="basePrice">
				<el-input size="small" type="number" v-model="ruleForm.basePrice"></el-input>
			</el-form-item>
			<el-form-item label="商品库存" prop="stockNum">
				<el-input size="small" type="number" v-model="ruleForm.stockNum"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
				<el-button size="small" @click="utils.back">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import uploadImage from '../../common/uploadImage.vue';
	import uploadImageMore from '../../common/uploadImageMore.vue';
	export default {
		name: "add",
		data() {
			return {
				ruleForm: {
					goodsNo:'',		//商品编号
					goodsName: "", //商品名称
					goodsTitle: "",	//商品英文名称
					goodsDesc: '', //商品描述
					supplierId: '', //供应商ID
					categoryId: '', //分类ID
					country: "", //国家
					region: "", //产区
					goodsNorm: {
						normName:''
					}, //规格名称
					year: "", //年份
					saleNum: "", //销量
					price1: "", //成本价格
					price: "", //销售价格
					vipPrice: "", //会员价格
					winePrice: "", //酒家价格
					salesPrice: "", //销售员价格
					distributorsPrice: "", //分销商价格
					rosePrice: "", //总代价格
					stockNum:'',	//库存
					investorPrice:'',//投资人价格,
  					basePrice: '',	//市场价
					goodsImgs: [],
					delImageIds:[]//要删除的图片id集合
				},
				mainImages:[],
				OtherImages:[],
				rules: {
					goodsName: [{
						required: true,
						message: '商品名称不能为空',
						trigger: 'blur'
					}],
					categoryId: [{
						required: true,
						message: '商品分类不能为空',
						trigger: 'blur'
					}],
					goodsDesc: [{
						required: true,
						message: '商品描述不能为空',
						trigger: 'blur'
					}],
					distributorsPrice: [{
						required: true,
						message: '分销商价格不能为空',
						trigger: 'blur'
					}],
					rosePrice: [{
						required: true,
						message: '总代价格不能为空',
						trigger: 'blur'
					}],
					salesPrice: [{
						required: true,
						message: '销售员价格不能为空',
						trigger: 'blur'
					}],
					vipPrice: [{
						required: true,
						message: '会员价格不能为空',
						trigger: 'blur'
					}],
					winePrice: [{
						required: true,
						message: '酒家价格不能为空',
						trigger: 'blur'
					}],
					saleNum: [{
						required: true,
						message: '销量不能为空',
						trigger: 'blur'
					}],
					region: [{
						required: true,
						message: '产区不能为空',
						trigger: 'blur'
					}],
					country: [{
						required: true,
						message: '国家不能为空',
						trigger: 'blur'
					}],
					normName: [{
						required: true,
						message: '规格类型不能为空',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '销售价格不能为空',
						trigger: 'blur'
					}],
					supplierId: [{
						required: true,
						message: '供应商不能为空',
						trigger: 'blur'
					}],
					year: [{
						required: true,
						message: '年份不能为空',
						trigger: 'blur'
					}],
					investorPrice: [{
						required: true,
						message: '投资人价格不能为空',
						trigger: 'blur'
					}],
					stockNum: [{
						required: true,
						message: '库存不能为空',
						trigger: 'blur'
					}],
					basePrice: [{
						required: true,
						message: '市场价不能为空',
						trigger: 'blur'
					}],
				},
				loading: false,
				categoryData: '',
				supplieres: '',
				categorParams: {
					"numPerPage": 10,
					"order": "asc",
					"pageNum": 1,
					"state": "OPEN",
					"supplierStateEnum": "OPEN"
				},
				updateImageCtrl: false, //是否修改图片
			};
		},
		created() {},
		mounted() {
			this.getCategory();
			this.getSupplier();
			this.getDetails();
		},
		components: {
			uploadImage,
			uploadImageMore
		},
		methods: {
			updateImage() {
				this.updateImageCtrl = !this.updateImageCtrl;
			},
			// 获取详情
			getDetails() {
				this.loading = true;
				this.$post("productDetails", {
					id: this.$route.params.id
				}).then(res => {
					this.loading = false;
					this.ruleForm = res.data;
					this.ruleForm.delImageIds = [];
					console.log(this.ruleForm);
					for(var i in this.ruleForm.goodsImgs){
						if(this.ruleForm.goodsImgs[i].attaType == 'MAIN'){
							this.mainImages.push(this.ruleForm.goodsImgs[i]);
						}else{
							this.OtherImages.push(this.ruleForm.goodsImgs[i]);
						}
						this.ruleForm.delImageIds.push(this.ruleForm.goodsImgs[i].id);
					}
					// this.ruleForm.goodsImgs = [];
					console.log(this.ruleForm.goodsImgs)
				}).catch((e)=>{
					this.loading = false;
				})
			},
			// 获取分类列表
			getCategory() {
				return new Promise((resolve, reject) => {
					this.$post("categoryList", this.categorParams).then((res) => {
						this.categoryData = res.data.rows;
					})
				});
			},
			// 获取供应商列表
			getSupplier() {
				this.categorParams.supplierType = ["SUPPLIER"];
				this.$post("supplierQuery", this.categorParams).then((res) => {
					this.supplieres = res.data.rows;
				})
			},
			// 获取子组件传来的图片地址
			getImagesMaineData(data){
				this.mainImages = [];
				for(var i in data){
					var item = {
						"attaType": "MAIN",
						"attaName": "商品图片",
						"attaUrl": data[i],
						"goodsId": this.$route.params.id
					}
					this.mainImages.push(item);
				}
			},
			// 获取子组件传来的说明图片地址
			getImagesMoreData(data){
				this.OtherImages = [];
				for(var i in data){
					var item = {
						"attaType": "OTHER",
						"attaName": "说明图",
						"attaUrl": data[i],
						"goodsId": this.$route.params.id
					}
					this.OtherImages.push(item);
				}
			},
			getDelImg(data){
				console.log(this.ruleForm.delImageIds)
				for(var i in this.OtherImages){
					if(this.OtherImages[i].attaUrl == data){
						this.ruleForm.delImageIds.push(this.OtherImages[i].id);
					}
				}
			},
			getDelImgMain(data){
				console.log(this.ruleForm.delImageIds)
				for(var i in this.mainImages){
					if(this.mainImages[i].attaUrl == data){
						this.ruleForm.delImageIds.push(this.mainImages[i].id);
					}
				}
			},
			// 提交
			submitForm(formName) {
				this.loading = true;
				this.$refs[formName].validate(valid => {
					if(valid) {
						this.$refs.imageMore.sendData();
						this.$refs.imageMain.sendData();
						for(var i in this.OtherImages){
							this.ruleForm.goodsImgs.push(this.OtherImages[i]);
						}
						for(var i in this.mainImages){
							this.ruleForm.goodsImgs.push(this.mainImages[i]);
						}
						this.ruleForm.delImageIds = this.ruleForm.delImageIds.join(',');

						this.$post("productUpdate", this.ruleForm).then(res => {
							this.loading = false;
							if(res.code == 200) {
								this.$msg.success("修改成功～");
								this.$router.back();
							} else {
								this.$msg.warning(res.message);
							}
						});
					} else {
						this.$msg.error("网络或服务器错误");
						this.loading = false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
		}
	};
</script>

<style>
	img {
		width: 200px;
		height: 200px;
	}
</style>

<style lang="less" scoped>
	.page {
		width: 100%;
		height: 100%;
		position: relative;
		.content {
			width: 1000px;
			margin: 0 auto;
			.el-input {
				width: 500px;
			}
			.goods-image-show {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}
		}
	}
</style>